<template>
  <div>
    <div style="margin-top: 2%;text-align:center;">
      <span style="margin-right: 1%">选择学生申诉的处理状态 : </span>
      <el-select  v-model="form.appealState" style="width: 16%;margin-right: 1%">
        <el-option label="等待管理员审核" :value="2"/>
        <el-option label="等待学生修改" :value="0"/>
        <el-option label="等待教师处理" :value="1"/>
        <el-option label="管理员审核通过" :value="3"/>
        <el-option label="管理员审核终止" :value="4"/>
        <el-option label="查看全部" :value="null"/>
      </el-select>
      <el-button @click="findAppeal()" style="font-size: 20px;" type="primary">立即查找</el-button>

      <el-button v-if="myself===false" @click="myselfOnly"
                 style="font-size: 20px;" type="primary">只看我处理的记录</el-button>
      <el-button v-if="myself===true" @click="myselfOnly"
                 style="font-size: 20px;" type="primary">查看全部申诉记录</el-button>
    </div>
    <!--申诉列表-->
    <template style="margin-top: 2%">
      <el-table :data="pageInfo.list" style="width: 100%">
        <el-table-column label="" width="200">
        </el-table-column>
        <el-table-column label="申诉发起时间" width="300" prop="appealId" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.startTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="本次审核的管理员编号" width="200" prop="adminId" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.adminId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理员姓名" width="300">
          <template slot-scope="scope">
            <span>{{scope.row.adminName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="360">
          <template slot-scope="scope">
            <span v-if="scope.row.appealState === 0">申诉已被驳回,等待学生修改</span>
            <span v-if="scope.row.appealState === 1">学生已提交,等待教师处理</span>
            <span v-if="scope.row.appealState === 2">申诉已被驳回,等待教师处理</span>
            <span v-if="scope.row.appealState === 3">教师已处理,等待管理员审核</span>
            <span v-if="scope.row.appealState === 4">管理员审核通过,审核结束!</span>
            <span v-if="scope.row.appealState === 5">该学生的此条申诉已经被管理员终止!</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" style="font-size: 16px"
                       @click="getOneGrade(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"/>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>
    <!--成绩详情-->
    <el-dialog title="成绩详情" :visible.sync="dialogForm" width="54%">
      <el-card style="margin:0 auto;width: 96%;">
        <div style="text-align: center;">
          <span style="font-size:20px;margin-right: 1%">课程名称 : </span>
          <span style="font-size:30px;font-weight: bold;margin-right: 2%">{{details.course.courseName}}</span>
        </div>
        <div style="text-align: center;">
          <span style="font-size:18px;margin-right: 1%">课程属性 : </span>
          <span v-if="details.course.flag===1" style="color: #F56C6C;font-weight: bold">必修</span>
          <span v-if="details.course.flag===2" style="color: #5CB87A;font-weight: bold">选修</span>
          <span v-if="details.course.flag===3" style="color: #409EFF;font-weight: bold">限选</span>
          <span style="margin-left: 2%;font-size:16px;">
                        (学分 : {{details.course.credit}} / 学时 : {{details.course.period}})</span>
          <span style="color: #409eff;font-size:18px;margin-left: 2%">
                        考核方式 : {{details.teachTask.method}}</span>
        </div>
        <div style="text-align: center;margin-top: 2%">
                    <span v-if="parseInt(details.score) >= parseInt(details.teachTask.passingScore)"
                          style="color: #67C23A;font-size:32px;font-weight: bold">
                            学生成绩 : {{details.score}} / 满分: {{details.teachTask.fullScore}}</span>
          <span v-if="parseInt(details.score) < parseInt(details.teachTask.passingScore)"
                style="color: #F56C6C;font-size:32px;font-weight: bold">
                            学生成绩 : {{details.score}} / 及格成绩: {{details.teachTask.passingScore}}</span>
        </div>
        <div style="text-align: center;margin-top: 2%">
          <span>满分 : {{details.teachTask.fullScore}} , </span>
          <span>及格成绩 : {{details.teachTask.passingScore}} , </span>
          <span v-if="parseInt(details.teachTask.finalPct)>0">
                        期末成绩 : {{details.gradeTemp.finalScore}}({{details.teachTask.finalPct}}%)
                    </span>
        </div>
        <div style="text-align: center;">
                    <span v-if="parseInt(details.teachTask.usualPct)>0">
                        平时成绩: {{details.gradeTemp.usualScore}}({{details.teachTask.usualPct}}%) ,
                    </span>
          <span v-if="parseInt(details.teachTask.expPct)>0">
                        实践成绩: {{details.gradeTemp.expScore}}({{details.teachTask.expPct}}%) ,
                    </span>
          <span v-if="parseInt(details.teachTask.midPct)>0">
                        期中成绩: {{details.gradeTemp.midScore}}({{details.teachTask.midPct}}%) ,
                    </span>
          <span v-if="parseInt(details.teachTask.otherPct)>0">
                        其它成绩: {{details.gradeTemp.otherScore}}({{details.teachTask.otherPct}}%)
                    </span>
        </div>
        <div style="text-align: center;margin-top: 1%">
          <el-table
              v-if="details.subScoresList != null && details.subScoresList.length > 0"
              :data="subScores"
              border style="width: 100%">
            <el-table-column fixed width="1">
            </el-table-column>
            <el-table-column label="学生该科课程的子成绩(见右侧)" width="220">
              <template>
                <span>学生的成绩(见右侧)</span>
              </template>
            </el-table-column>
            <el-table-column
                width="220"
                v-for="item in details.subScoresList" :key="item.subProjectId"
                :label="item.subName">
              <template>
                <span>{{item.subScore}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="text-align: center;margin-top: 1%">
          <el-button @click="handleAppeal()" style="font-size: 20px;" type="primary">进入申诉</el-button>
        </div>
      </el-card>
    </el-dialog>
    <!--申诉详情-->
    <el-dialog title="查看申诉详情" :visible.sync="seeAppeal" :before-close="handleClose">
      <el-card style="margin:0 auto;width: 96%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30%">
          <el-form-item label="申诉前成绩 : ">
            <span>{{ruleForm.originalGrade}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="更正成绩 : ">
            <span v-if="parseInt(ruleForm.nowGrade)>0">{{ruleForm.nowGrade}}</span>
            <span v-if="ruleForm.nowGrade==null">暂无</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="学生首次提交时间 : ">
            <span>{{ruleForm.startTime}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="学生诉求 : ">
            <span style="color: #409eff;font-size: 18px">{{ruleForm.appealContent}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="教师意见 : ">
            <span style="color: #F56C6C;font-size: 18px">{{ruleForm.teacherOpinion}}</span>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item label="管理员意见 : " prop="adminOpinion">
            <el-input type="textarea" style="width:60%" :autosize="{ minRows: 3}"
                      v-model="ruleForm.adminOpinion"></el-input>
          </el-form-item>
          <div style="margin-bottom: 4%;"></div>
          <el-form-item v-if="ruleForm.appealStateOld === null" label="申诉状态 : ">
            <span v-if="ruleForm.appealState === 0">申诉已被驳回,等待学生修改</span>
            <span v-if="ruleForm.appealState === 1">学生已提交,等待教师处理</span>
            <span v-if="ruleForm.appealState === 2">申诉已被驳回,等待教师处理</span>
            <span v-if="ruleForm.appealState === 3">教师已处理,等待管理员审核</span>
            <span v-if="ruleForm.appealState === 4">管理员审核通过,审核结束!</span>
            <span v-if="ruleForm.appealState === 5">学生的申诉已经被管理员终止!</span>
          </el-form-item>
          <el-form-item v-if="ruleForm.appealStateOld !== null" label="我的操作 : ">
            <el-select  v-model="ruleForm.appealState"
                        style="width: 50%;"
                        clearable filterable>
              <el-option label="通过该审核" :value="4"/>
              <el-option label="终止该审核" :value="5"/>
              <el-option label="驳回至教师" :value="2"/>
              <el-option label="驳回至学生" :value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div v-if="ruleForm.appealStateOld !== null">
              <el-button type="primary" style="font-size: 20px"
                         @click="submitForm('ruleForm')">立即提交</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      adminId:'',
      myself: false,
      dialogForm: false,
      seeAppeal: false,
      form:{
        adminId:'',
        appealState: 2,
      },
      currPage: 1,
      pageInfo:{},
      details:{
        course:{},
        teachTask:{},
        teacher:{},
        gradeTemp:{},
      },
      subScores: [],//子成绩需要一个list
      ruleForm:{
        appealId:'',
        gradeId:'',
        startTime:'',
        originalGrade:'',
        appealContent:'',
        nowGrade:'',
        teacherOpinion:'',
        adminId:'',
        adminName:'',
        adminOpinion:'',
        appealStateOld: null,
        appealState:'',
      },
      rules:{
        adminOpinion: [
          { required: true, message: '请输入您的审核意见', trigger: 'blur' },
          { min: 2, max: 500, message: '请输入 2 到 500 个字符!', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.adminId = JSON.parse(sessionStorage.getItem("id"));
    this.getData();
    this.subScores.push("");//子成绩的list需要展示一行数据
  },
  methods:{
    submitForm(formName){//提交
      if(this.ruleForm.nowGrade == null  && this.ruleForm.appealState===4){
        this.$message.error('成绩未更正的审核无法执行通过操作 !');
      }
      else{
        this.$refs[formName].validate((valid) => {//校验格式
          if (valid) {//格式校验通过
            this.ruleForm.adminId = this.adminId;//将处理的管理员id更变为自己的
            let path = 'http://localhost:8081/appeal/adminUpdateAppeal';
            this.$ajax.post(path,this.ruleForm).then(res=>{
              if(res.data.status===0){
                this.$message.success(res.data.message);
                this.getData();//刷新页面数据
                this.dialogForm = false;
                this.seeAppeal = false;
              }
              else{
                this.$message.error(res.data.message);
              }
            })
          }
        });
      }
    },
    myselfOnly(){
      if(this.myself){
        this.myself = false;
        this.form.adminId = '';
      }
      else{
        this.myself = true;
        this.form.adminId = this.adminId;
      }
      this.findAppeal();
    },
    getData(){//获取数据
      let path = `http://localhost:8081/appeal/getAppeals/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
      })
    },
    findAppeal(){//查找
      this.currPage = 1;
      this.getData();
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    getOneGrade(val){//进入申诉对应的成绩详情
      let path = 'http://localhost:8081/appeal/teacherGetOneGrade';
      this.$ajax.post(path,val).then(res=>{
        this.details = res.data.obj;//成绩数据
        this.ruleForm = val;//将申诉信息保存到表单中
        this.ruleForm.appealStateOld = null;//提前置空
        this.dialogForm=true;
      })
    },
    handleAppeal(){//申诉处理
      if(this.ruleForm.appealState === 3){//状态为3则由管理员进行处理
        this.ruleForm.appealStateOld = JSON.parse(JSON.stringify(this.ruleForm.appealState));//深拷贝
        this.ruleForm.appealState = 4;
      }
      this.seeAppeal = true;
    },
    handleClose(done){
      this.$confirm('确认关闭?').then(()=>{
        if(this.ruleForm.appealStateOld != null){//管理员操作未成功也会改变此状态，因此需要复原
          this.ruleForm.appealState = this.ruleForm.appealStateOld;
          this.ruleForm.appealStateOld = null;//置空
        }
        done();
      })
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>